<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>监视属性</title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			今天天气{{info}}
			<button @click="changeWeather">点击切换</button>
		</div>
	</body>
	
	<script type="text/javascript">
			Vue.config.productionTip=false;
			//函数定义数据
			let vm = new Vue({
				el:'#root',
				// 函数式
				data:{
					isHot:false
				},
				methods:{
					changeWeather(){
						this.isHot = !this.isHot;
					}
				},//method方法在界面上出现多少次，就会直接调用多少次，不会存在缓存。
				computed:{
					info(){
						return this.isHot?'炎热':'凉爽'
					}
				},
				watch:{
					isHot:{
						immediate:true,//初始化时，让handler调用，设置成true将会立即调用
						handler(newValue,oldValue){
							//当isHost改变的时候，会调用
						}
					}
				}
			});
			//外面的写法，用于对使用过程中希望监听的属性添加
			vm.$watch('isHot',{
						immediate:true,//初始化时，让handler调用，设置成true将会立即调用
						handler(newValue,oldValue){
							//当isHost改变的时候，会调用
						}
					});
	</script>
</html>
